<template>
  <div class="reset-psw">
    <v-header title="修改密码" isBack />
    <div class="content">
      <div class="input-line clearfix">
        <div class="label fl">旧密码</div>
        <input class="fl" type="password" v-model="oldPwd" />
      </div>
      <div class="input-line clearfix">
        <div class="label fl">新密码</div>
        <input class="fl" type="password" v-model="newPwd" />
      </div>
      <div class="input-line clearfix">
        <div class="label fl">确认新密码</div>
        <input class="fl" type="password" v-model="rePwd" />
      </div>
      <div class="btn" @click="changePsw">确认修改</div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
export default {
  data() {
    return {
      oldPwd: '',
      newPwd: '',
      rePwd: ''
    }
  },
  components: {
    'v-header': Header
  },
  methods: {
    check() {
      if (!this.oldPwd) {
        this.$message({
          message: '请输入旧密码',
          type: 'warning'
        })
        return false
      }
      if (!this.newPwd || this.newPwd.length < 6) {
        this.$message({
          message: '请输入至少6位新密码',
          type: 'warning'
        })
        return false
      }
      if (this.newPwd !== this.rePwd) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'warning'
        })
        return false
      }
      return true
    },
    changePsw() {
      const { oldPwd, newPwd, rePwd } = this
      if (this.check()) {
        this.$http
          .changePsw({
            oldPwd,
            newPwd,
            rePwd,
            sysType: this.$config.sysType
          })
          .then((res) => {
            if (res.httpStatusCode === 200 && res.success) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$router.push({ path: '/login' })
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
      }
    }
  }
}
</script>

<style lang="less">
.reset-psw {
  .content {
    padding: 0.4rem 0.4rem;
    .input-line {
      margin-bottom: 0.4rem;
      height: 0.98rem;
      line-height: 0.98rem;
      border-radius: 1rem;
      border: 1px solid #ddd;
      font-size: 0.26rem;
      .label {
        margin: 0 0.3rem;
        color: #666;
        font-size: 0.3rem;
      }
      .label::before {
        content: '*';
        color: #f60;
      }
      input {
        width: 65%;
        border: none;
        height: 0.6rem;
        line-height: 0.6rem;
        margin-top: 0.18rem;
        background: #fff;
      }
    }
  }
}
</style>
